var Demo = {
	alertDialog: null,
	alert: function(content) {
		if (!this.alertDialog) {
			// this dialog won't be destroyed when clicking "OK"
			this.alertDialog = new Dialog({
				top: 140,
				openOnCreate: false,
				destroyOnClose: false
			});
		}
		this.alertDialog.content.innerHTML = content;
		this.alertDialog.open();
	},

	testIE6: function() {
		new Dialog({
			width: 600,
			title: 'IE 6 select test',
			content: 'It\'s an infamous bug of IE that select elements ignore their and other elements\' CSS z-index positioning property. The solution is often an iframe.'
		})
	},

	basic: function() {
		new Dialog({content: 'This is the very basic dialog!'});
	},

	prompt: function() {
		var dialog = new Dialog({
			title: 'Prompt demo',
			content: 'Write something here:<br /><input type="text" id="prompt-input" />',
			focus: 'prompt-input',
			buttons: {
				'OK': function() {
					var inputText = document.getElementById('prompt-input').value;
					if (inputText.length > 0) {
						document.getElementById('prompt-answer').innerHTML = inputText;
						this.close();
					} else {
						Demo.alert('You should write something!');
					}
				},
				'Cancel': Dialog.prototype.close
			}
		});
	},

	buttonsDialog: null,
	addButtons: function() {
		this.buttonsDialog = new Dialog({
			title: 'Add button demo',
			content: 'Click <a href="javascript:Demo.newButton()">here</a> to add a new button!'
		});
	},

	newButton: function() {
		this.buttonsDialog.addButtons({'New button': function() {Demo.alert('You just clicked the new button!')}}, true);
		this.buttonsDialog.content.innerHTML = '<span style="color:red;">The new button is added. Give it a try!</span>';
	},

	mailDialog: null,
	mailForm: function() {
		this.mailDialog = new Dialog({
			title: 'Mail form demo',
			content: '<p>To: <input type="text" id="mail-to" value="someone@abc.com" /></p><p><textarea cols="50" rows="4" style="width:350px;"></textarea></p>',
			buttons: {
				'Send': function() {
					var email = document.getElementById('mail-to').value;
					this.header.style.backgroundImage = 'url(loading.gif)';
					this.content.innerHTML = '<span style="font-size:16px;">Please wait for the mail delivery...</span>';
					this.actions.innerHTML = '';
					setTimeout('Demo.mailDone("' + email + '")', 1000);
				},
				'Cancel': Dialog.prototype.close
			}
		});
	},

	mailDone: function(email) {
		var d = this.mailDialog;
		d.header.style.backgroundImage = 'none';
		d.content.innerHTML = 'Mail sent to ' + email + '. Please wait for response.';
		d.addButtons({'Close': Dialog.prototype.close});
	},

	selectStack: function() {
		new Dialog({
			title: 'IE6 select element test',
			content: 'This dialog can hide select elements on the page, but this dialog itself has a select element. <a href="javascript:Demo.alert(\'This dialog hides select under it.\')">Click here </a>to pop up another dialog.<br /><select><option>Chinese</option><option>English</option></select>'
		});
	},

	addTitle: function() {
		new Dialog({
			content: 'Loading...',
			buttons: {
				'Add Title': function() {
					this.setTitle('addTitle demo');
				},
				'Close': Dialog.prototype.close
			}
		});
	}
};
